// url配置 解决线上跟本地请求资源路径的不同问题
let env = '';
if(location.host.indexOf('vitory.gitee.io') !== -1){  
    // 线上
    env = '/kugougame';
}
const urlConfig = {
    musicJson :  env + '/src/data/music.json',
    picJson : env + '/src/data/pic.json'
};

// 预加载   图片+ 音频 == 100% 
var queue = new createjs.LoadQueue();
queue.on('progress',function(e){
    var p = parseInt(e.progress * 100) + "%";
    console.log(p);
    $("#loadPage").find("span").html(p);
    var pro = $("#loadPage").find("span").text();
    if(pro == "100%"){
        $("#loadPage").attr("style","left:-100%");
        $("#homePage").attr("style","left:0");
        $(".secguess").attr("style","animation: fadeInDownBig .2s linear;");
    }
},this);
// 利用Promise异步请求图片
function loadPic(){
    return new Promise(function(reslove){
        $.ajax({
            url: urlConfig.picJson,
            success:function(res){
                reslove(res);
            },
            error:function(err){
                console.log(err);
            }
        });
    })
}
// 异步请求音频
function loadMusic(){
    return new Promise(function(reslove){
        $.ajax({
            url:urlConfig.musicJson,
            success:function(res){
                reslove(res);
                shuffle(res);
                console.log("请求的音频",res);
                clickABC(res);
                clickStart(res);
                again(res);
            },
            error:function(err){
                console.log(err);
            }
        });
    })
}
// 待图片和音频都请求完成后再进行下一步加载操作
Promise.all([loadPic(),loadMusic()]).then(function(res){
    var pic = res[0],music = res[1];
    let arr = [];
    $.each(pic, function (index, item) { 
        // console.log(item); 
        arr.push(item);
    });
    $.each(music, function (index, item) { 
        // console.log(item.audio); 
        arr.push(item.audio);
    });
    console.log("arr",arr); 
    queue.loadManifest(arr);
    // console.log('====================================');
    // console.log(pic,music);
    // console.log('====================================');
    // queue.on('complete',function(){
    //     //pic完成  加载music
    //     queue.loadManifest(music);
    // },this);
    
})

// 随机打乱数组
function shuffle(arr) {
    let i = arr.length;
    while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
    }
}

var clicktime = 1;
var count = 0; // 猜对的数量
function clickABC(el){
    // 监听A选项
    $(".a").on("click",function(){
        clicktime++;
        console.log("clciktime",clicktime);
        var id = 0; // 当前点击的歌名编号
        var answer =$("#selectPage>span").text(); // 获取正确的答案编号
        if(id == answer){ 
            console.log("太棒了，你选对了！");
            $(".a>span").attr("style","color:green"); // 选对了字体变绿色
            // 设置0.5秒的定时器 
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);   
            }, 500); 
            count++; // 答对+1   
            console.log(count);   
            $(".info>p>span").html(count); // 答对的次数传到最终结果
        }else{
            console.log("很遗憾，你选错了！");
            // var nth = 2 + answer;
            $(".a>span").attr("style","color:red"); // 选错了字体变红色
            // $("#selectPage span").eq(nth).attr("style","color:green");
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);
            }, 500);
        }
    });
    // 监听B选项
    $(".b").on("click",function(){
        clicktime++;
        console.log("clicktime",clicktime);
        var id = 1; // 当前点击的歌名编号
        var answer =$("#selectPage>span").text(); // 获取正确的答案编号
        if(id == answer){
            console.log("太棒了，你选对了！");
            $(".b>span").attr("style","color:green");
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);
            }, 500);  
            count++;   
            console.log(count);   
            $(".info>p>span").html(count);      
        }else{
            console.log("很遗憾，你选错了！");
            // var nth = 2 + answer;
            $(".b>span").attr("style","color:red");
            // $("#selectPage span").eq(nth).attr("style","color:green");
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);
            }, 500);
        }
    });
    // 监听C选项
    $(".c").on("click",function(){
        clicktime++;
        console.log("clicktime",clicktime);
        var id = 2; // 当前点击的歌名编号
        var answer =$("#selectPage>span").text(); // 获取正确的答案编号
        if(id == answer){
            console.log("太棒了，你选对了！");
            $(".c>span").attr("style","color:green");
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);
            }, 500);
            count++;   
            console.log(count);   
            $(".info>p>span").html(count);        
        }else{
            console.log("很遗憾，你选错了！");
            $(".c>span").attr("style","color:red");
            var t = setTimeout(() => {
                // 清空上一次的内容
                $("#selectPage>audio").attr("src","");  
                $(".a>span,.b>span,.c>span").html("");
                // 重置歌名颜色
                $(".a>span,.b>span,.c>span").attr("style","color:black"); 
                // 重新渲染下一首歌的内容
                var src = el[clicktime].audio;
                $("#selectPage>audio").attr("src",src);
                $(".a>span").html(el[clicktime].item[0]);
                $(".b>span").html(el[clicktime].item[1]);
                $(".c>span").html(el[clicktime].item[2]);
                console.log(el[clicktime]);
                // 获取正确答案单独存储到span容器
                var answer =  el[clicktime].answer;
                $("#selectPage>span").html(answer);
                // 清除定时器
                clearTimeout(t);
            }, 500);
        } 
    });
}

// 监听开始按钮点击
function clickStart(el){    
    $("#homePage").find(".startBtn").on("click",function(){
        $("#homePage").removeAttr("style");
        $("#selectPage").attr("style","left:0");
        $("#bg1").attr("style","left:0");
        $("#selectPage").prepend('<audio src="" controls autoplay loop="loop"></audio>');
        setTime();

        // 获取相关音频数据渲染页面
        var src = el[0].audio;
        $("#selectPage>audio").attr("src",src);
        $(".a>span").html(el[0].item[0]);
        $(".b>span").html(el[0].item[1]);
        $(".c>span").html(el[0].item[2]);

        // 获取正确答案单独存储到span容器
        var answer =  el[0].answer;
        $("#selectPage>span").html(answer);
        console.log("answer",answer);
        console.log(el[0]);
    
        $(".secguess").removeAttr("style");
    });
}

// 监听再次挑战按钮点击
function again(el){
    $(".button1").on("click",function(){
        // 改变页面样式进行交互
        $("#bg1,#bg2,#bg3,#bg4,#bg5,#bg6").removeClass("resetLeft removePage");
        $("#homePage").attr("style","left:0");
        $("#end").removeAttr("style");
       
        clicktime = 1;  // 重置点击A B C按钮的次数
        count = 0;      // 重置分数
       
        $(".info>p>span").html(""); // 重置猜中的歌曲数
    
        $(".secguess").attr("style","animation: fadeInDownBig .2s linear;");
    
        $(".front1,.front2").removeAttr("style");

        shuffle(el);  // 重新打乱歌曲顺序
    });
}

// 监听分享按钮点击
$(".button2").on("click",function(){
    $("#share").attr("style","left:0");  
});

// 监听分享页点击
$("#share").on("click",function(){
    $("#share").removeAttr("style");
});

// 点击惊喜图片
$(".front1").on("click",function(){
    $(".front1").attr("style","z-index:-1;");
})
$(".front2").on("click",function(){
    $(".front2").attr("style","z-index:-1;");
})

// 点击显示的惊喜图片
$(".back1").on("click",function(){
    $("#jxPic1").attr("style","left:0");
})
$("#jxPic1").on("click",function(){
    $("#jxPic1").removeAttr("style");
})
$(".back2").on("click",function(){
    $("#jxPic2").attr("style","left:0");
})
$("#jxPic2").on("click",function(){
    $("#jxPic2").removeAttr("style");
})

// 设置60秒倒数
function setTime(){
    var time = 60;
    // 重置
    $("#selectPage>.samllM").find("span").attr("style","color:black;");
    $("#selectPage>.samllM").find("span").html("60s");
    // 设置定时器 
    var t = setInterval(() => {
        time--;
        if(time<10){
            time = "0" + time;
            $("#selectPage>.samllM").find("span").attr("style","color:red;");
        }
        $("#selectPage>.samllM").find("span").html(time+"s");
        var text = $("#selectPage>.samllM").find("span").text();
        changPage(text);
        // 清除定时器及相关设置
        if(text == "00s"){
            clearInterval(t);
            $("#bg6").removeClass("resetLeft");
            $("#end").attr("style","left:0");
            $("#selectPage").removeAttr("style");
            // 移除音乐路径，让音乐停止
            $("audio").remove();    
            $("#selectPage>span").html("");
        }
    }, 1000);
}

// 按剩余的倒数时切换背景页
function changPage(tx){
    if(tx == "55s"){
        $("#bg1").removeAttr("style");
        $("#bg1").addClass("removePage");
        $("#bg2").addClass("resetLeft");
    }
    if(tx == "50s"){
        $("#bg2").addClass("removePage");
        $("#bg3").addClass("resetLeft");
    }
    if(tx == "45s"){
        $("#bg3").addClass("removePage");
        $("#bg4").addClass("resetLeft");
    }
    if(tx == "40s"){
        $("#bg4").addClass("removePage");
        $("#bg5").addClass("resetLeft");
    }
    if(tx == "35s"){
        $("#bg5").addClass("removePage");
        $("#bg6").addClass("resetLeft");
    }
    if(tx == "30s"){
        $("#bg6").addClass("removePage");
        $("#bg1").removeClass("removePage");
        $("#bg1").addClass("resetLeft");
    }
    if(tx == "25s"){
        $("#bg1").addClass("removePage");
        $("#bg2").removeClass("removePage");
        $("#bg2").addClass("resetLeft");
    }
    if(tx == "20s"){
        $("#bg2").addClass("removePage");
        $("#bg3").removeClass("removePage");
        $("#bg3").addClass("resetLeft"); 
    }
    if(tx == "15s"){
        $("#bg3").addClass("removePage");
        $("#bg4").removeClass("removePage");
        $("#bg4").addClass("resetLeft");
    }
    if(tx == "10s"){
        $("#bg4").addClass("removePage");
        $("#bg5").removeClass("removePage");
        $("#bg5").addClass("resetLeft");
    }
    if(tx == "05s"){
        $("#bg5").addClass("removePage");
        $("#bg6").removeClass("removePage");
        $("#bg6").addClass("resetLeft");
    }
}